<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
	xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="Dashboard">
<meta name="keyword"
	content="Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
<meta name="referrer" content="never">

<title>PICQ48</title>

<!-- Bootstrap core CSS -->
<link th:href="@{/assets/css/bootstrap.css}" rel="stylesheet">
<!--external css-->
<link th:href="@{/assets/font-awesome/css/font-awesome.css}"
	rel="stylesheet" />

<!-- Custom styles for this template -->
<link th:href="@{/assets/css/style.css}" rel="stylesheet">
<link th:href="@{/assets/css/style-responsive.css}" rel="stylesheet">
<link th:href="@{/assets/css/bootstrap-table.min.css}" rel="stylesheet" />

<link th:href="@{/css/data_visualization/taoba_visual.css}"
	rel="stylesheet" />

<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body>

	<section id="container">
		<!-- **********************************************************************************************************************************************************
      TOP BAR CONTENT & NOTIFICATIONS
      *********************************************************************************************************************************************************** -->
		<!--header start-->
		<header class="header black-bg">
			<div class="sidebar-toggle-box">
				<div class="fa fa-bars tooltips" data-placement="right"
					data-original-title="展开/收起"></div>
			</div>
			<!--logo start-->
			<a href="/index" class="logo"><b>PICQ48</b></a>
			<!--logo end-->
			<div class="top-menu" shiro:guest>
				<ul class="nav pull-right top-menu">
					<li><a class="logout" href="/login">登录</a></li>
				</ul>
			</div>
			<div class="top-menu" shiro:authenticated>
				<ul class="nav pull-right top-menu">
					<li><a class="logout" href="/logout">退出</a></li>
				</ul>
			</div>
		</header>
		<!--header end-->

		<!-- **********************************************************************************************************************************************************
      MAIN SIDEBAR MENU
      *********************************************************************************************************************************************************** -->
		<!--sidebar start-->
		<aside>
			<div id="sidebar" class="nav-collapse ">
				<!-- sidebar menu start-->
				<ul class="sidebar-menu" id="nav-accordion">

					<p class="centered">
						<a href="javascript:void(0);"> <img
							th:src="@{/assets/img/ui-sam.jpg}" class="img-circle" width="60" />
						</a>
					</p>
					<h5 class="centered">
						<span th:if="${session.user != null}"
							th:text="${session.user.nickname}"></span> <span
							th:unless="${session.user != null}">PICQ48</span>
					</h5>

					<li class="mt"><a href="/index"> <i
							class="fa fa-university"></i> <span>主页</span>
					</a></li>
					<li class="sub-menu" shiro:hasPermission="system-manage:url"><a
						href="javascript:;"> <i class="fa fa-th-large"></i> <span>系统配置</span>
					</a>
						<ul class="sub">
							<li shiro:hasPermission="system-user:url"><a
								href="/system-manage/system-user">用户管理</a></li>
							<li shiro:hasPermission="system-role:url"><a
								href="/system-manage/system-role">角色管理</a></li>
							<li shiro:hasPermission="system-permission:url"><a
								href="/system-manage/system-permission">资源管理</a></li>
						</ul></li>
					<li class="sub-menu"><a href="javascript:;"> <i
							class="fa fa-cogs"></i> <span>机器人配置</span>
					</a>
						<ul class="sub">
							<li><a href="/resource-management/member-table">成员列表</a></li>
							<li><a href="/resource-management/modian-table">摩点项目列表</a></li>
							<li><a href="/resource-management/taoba-table">桃叭项目列表</a></li>
							<li><a href="/resource-management/weibo-table">微博用户列表</a></li>
							<li><a href="/resource-management/qq-table">QQ列表</a></li>
							<li><a href="/resource-management/quartz-confing-table">轮询配置列表</a></li>
						</ul></li>
					<li class="sub-menu"><a class="active" href="javascript:;">
							<i class="fa fa-desktop"></i> <span>可视化数据</span>
					</a>
						<ul class="sub">
							<li><a href="/data-visualization/modian-visual">摩点项目数据</a></li>
							<li class="active"><a
								href="/data-visualization/taoba-visual">桃叭项目数据</a></li>
							<li><a href="/data-visualization/room-message">口袋房间消息</a></li>
						</ul></li>
					<li class="sub-menu"><a href="/help"> <i
							class="fa fa-question-circle"></i> <span>帮助</span>
					</a></li>
				</ul>
				<!-- sidebar menu end-->
			</div>
		</aside>
		<!--sidebar end-->
		<div class="copyrights">
			Collect from <a href="http://www.cssmoban.com/">网页模板</a>
		</div>

		<!-- **********************************************************************************************************************************************************
      MAIN CONTENT
      *********************************************************************************************************************************************************** -->
		<!--main content start-->
		<section id="main-content">
			<section class="wrapper">
				<h3>
					<i class="fa fa-angle-right"></i> 可视化数据 <i
						class="fa fa-angle-right"></i> 桃叭集资数据
				</h3>
				<div class="row">
					<!-- 工具容器 -->
					<div id="toolbar">
						<div class="form-group">
							<label class="col-sm-2 control-label"></label>
							<div class="col-sm-7">
								<input id="detailIds" type="text" class="form-control"
									th:value="${detailIds}"> <span class="help-block">输入桃叭项目ID（可点击<a
									href="/resource-management/taoba-table">这里</a>查询），多个项目ID之间使用英文逗号间隔。
								</span>
							</div>
							<div class="col-sm-2">
								<button id="btn_select" class="btn btn-primary">
									<i class="fa fa-pencil"></i> 查询
								</button>
							</div>
						</div>

					</div>
				</div>
				<div class="row">
					<span th:if="${msg != null}" th:text="${msg}"></span>
					<div class="col-lg-12" th:if="${detailNames != null}">
						<div class="content-panel">
							<h4>
								<i class="fa fa-angle-right"></i> <span th:text="${detailNames}"></span>
							</h4>
							<section id="unseen">
								<table
									class="table table-bordered table-striped table-condensed">
									<thead>
										<tr>
											<th>排名</th>
											<th>头像</th>
											<th>用户名</th>
											<th>打卡次数</th>
											<th class="numeric">总筹金额(元)</th>
										</tr>
									</thead>
									<tbody>
										<tr th:each="join,joinStat:${joinTable}">
											<td th:text="${joinStat.count}" width="80"></td>
											<td width="160"><img th:src="${join.icon}"
												class="img-circle" width="60" /></td>
											<td th:text="${join.name}"></td>
											<td th:text="${join.count}"></td>
											<td class="numeric" th:text="'￥' + ${join.data}"></td>
										</tr>
									</tbody>
								</table>
							</section>
						</div>
						<!-- /content-panel -->
					</div>
					<!-- /col-lg-4 -->
				</div>
				<!-- /row -->
			</section>
			<!--/wrapper -->
		</section>
		<!-- /MAIN CONTENT -->
		<!--main content end-->
		<!--footer start-->
		<footer class="site-footer">
			<div class="text-center">
				2019 - PICQ48 - 机器人QQ：<a href="javascript:void(0);"
					title="2965741174">2965741174</a> <a href="#container"
					class="go-top"> <i class="fa fa-angle-up"></i>
				</a>
			</div>
		</footer>
		<!--footer end-->
	</section>

	<!-- js placed at the end of the document so the pages load faster -->
	<script th:src="@{/assets/js/jquery.js}"></script>
	<script th:src="@{/assets/js/jquery-1.8.3.min.js}"></script>
	<script th:src="@{/assets/js/bootstrap.min.js}"></script>
	<script class="include" type="text/javascript"
		th:src="@{/assets/js/jquery.dcjqaccordion.2.7.js}"></script>
	<script th:src="@{/assets/js/jquery.scrollTo.min.js}"></script>
	<script th:src="@{/assets/js/jquery.nicescroll.js}"
		type="text/javascript"></script>

	<script th:src="@{/assets/js/bootstrap-table.min.js}"></script>
	<script th:src="@{/assets/js/bootstrap-table-zh-CN.min.js}"></script>

	<!--common script for all pages-->
	<script th:src="@{/assets/js/common-scripts.js}"></script>

	<!--script for this page-->
	<script th:src="@{/js/data_visualization/taoba_visual.js}"></script>

	<script th:src="@{/assets/js/layer/layer.js}"></script>

</body>

</html>